<template>
	<view class="page-content">
		<u-sticky zIndex="99">
			<view class="bg_fff pd-20">
				<view class="itemBaseBox">
					<u-image :src="data.missionInfo.cover" width="130rpx" height="130rpx"></u-image>
					<view class="itemBase f_30">
						<view class="display_row_btn_center"><text
								class="c_333333 title">{{data.keyword||""}}</text><text
								class="c_C62B2C status f-24 mr-10 manage">{{data.status.status_text||""}}</text></view>
						<text class="c_C62B2C status f-24"
							v-if="data.categoryInfo">{{data.categoryInfo.name||""}}</text>
						<!-- <div class="popBtn"><text class="c_ffffff accc f-24 mr-10" @click="showAcc">已回填账户</text></div> -->
					</view>
				</view>
				<view class="mt-20">
					<text class="status f-24">内容链接</text>
					<text class="f-24 c_999999 ml-10" @click.stop="copyCode(data.url)">{{data.url}}</text>
				</view>
				<view class="mt-10">
					<text class="f-26 c_C62B2C" v-if="data.name!=''">《{{data.name||""}}》@{{data.author}}</text>
					<text v-else></text>
				</view>
			</view>
		</u-sticky>

		<zhihu-feedback style="display: flex;flex-direction: column;flex:1" :missionId="id" :mission="data"
			:flag="platform_flag"></zhihu-feedback>


		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<scroll-view scroll-y="true" class="acc_list">
					<view class="acc_item" v-for="(item,index) in acc_list" :key="index">
						<view><text space="emsp">平 台 ：</text><text>{{item.ppname}}</text></view>
						<view><text space="emsp">账户ID ：</text><text>{{item.acc_id}}</text></view>
						<view><text space="emsp">昵 称 ：</text><text>{{item.nickname}}</text></view>
						<view><text space="emsp">添加时间：</text><text>{{item.create_at}}</text></view>
						<u-line direction="row" color="#999999"></u-line>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getKeyword,
		getSearchData,
		getPostAccount
	} from '@/config/api.js'

	export default {
		data() {
			return {
				data: {},
				id: "",
				platform_flag: "",
				acc_list: []
			}
		},
		onLoad(op) {
			this.id = op.id;
			this.platform_flag = op.platform_flag;
			this.getData();
		},
		methods: {
			showAcc() {
				if (this.acc_list.length <= 0) {
					uni.showToast({
						title: '未回填数据！',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				this.$refs.popup.open('right')
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			getData() {
				getKeyword({
					id: this.id,
					platform_flag: this.platform_flag
				}).then(res => {
					this.data = res
				}).catch(err => {

				})

				getPostAccount({
					keyword_id: this.id
				}).then(res => {
					console.log(res)
					this.acc_list = res;
				}).catch(err => {

				})
			}
		}
	}
</script>

<style scoped>
	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 130rpx;
		margin-left: 20rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.status {
		width: 120rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #999999;
		border: 1px solid #999999;
		font-size: 24rpx !important;
	}

	.addBtn {
		width: 100%;
		height: 60rpx;
		border: 1px dotted #C62B2C;
		margin-bottom: 40rpx;
		border-radius: 10rpx
	}

	.manage {
		color: #C62B2C !important;
		border: 1px solid #C62B2C !important;
	}


	/deep/ .selected-area.placeholder {
		color: #c0c4cc !important;
		font-size: 15px !important;
		text-align: right;
	}

	/deep/ .input-value.input-value-border {
		height: 24px !important;
		padding: 0px !important;
		border: none;
	}

	.popBtn {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.accc {
		background-color: #C62B2C;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}

	.acc_list {
		padding: 10rpx;
		height: 100%;
	}

	.acc_item>view {
		margin-bottom: 6rpx;
		display: flex;
		flex-direction: row;
	}

	.acc_item>view>text:first-child {
		color: #666;
		font-size: 28rpx;
	}

	.acc_item>view>text:last-child {
		font-size: 30rpx;
	}

	.popup-content {
		height: 100%;
	}
</style>
